<template>
  <div>
    <swiper
      :list="list"
      :auto="auto"
      :loop="loop"
      :show-dots="showDots"
      v-model="index"
      :dots-position="dotsPosition"
      >
    </swiper>
  </div>
</template>
<script>
  import { Swiper, SwiperItem } from 'vux';
  export default {
    props: {
      // 列表数据
      list: {
        required: false,
        default: true,
        type: true
      },
      // 是否自动轮播
      auto: {
        required: false,
        default: true,
        type: Boolean
      },
      // 是否循环
      loop: {
        required: false,
        default: true,
        type: Boolean
      },
      // 是否显示提示点
      showDots: {
        required: false,
        default: true,
        type: Boolean
      },
      // 显示点的位置
      dotsPosition: {
        required: false,
        default: 'center',
        type: String
      }

    },
    data() {
      return {
        index: 0,
        red: '#ff0000'
      }
    },
    methods: {
      onIndexChange(index) {
        console.log(index)
      }
    },
    components: {
      Swiper,
      SwiperItem
    }
  }
</script>
<style scoped lang="less">
</style>
